import { makeAutoObservable } from 'mobx'

// 普通使用：
class CounterStore {
  // 1、定义数据
  count = 10

  // 2、把数据弄成响应式
  constructor() {
    makeAutoObservable(this)
  }

  // 3、定义 action 函数（修改数据）
  addCount = () => {
    this.count++
  }
}

// computed：
class ComputedStore {
  // 1、定义数据
  list = [1, 3, 5, 7, 9]

  // 2、把数据弄成响应式
  constructor() {
    makeAutoObservable(this)
  }

  // 3、使用 get 定义 computed 计算属性（方法，用不了箭头函数）
  get filterList () {
    return this.list.filter(item => item > 5)
  }

  // 定义方法，修改数组数据
  addList = () => {
    this.list.push((Math.random() * 10).toFixed(0))
  }
}

// 4、实例化，导出给 react 使用
export const counterStore = new CounterStore()
export const computedStore = new ComputedStore()